.project-view-modal .modal-close {
  top: 13px;
  right: 30px;
}

.project-view {
  @apply flex;
}

.project-view-item {
  @apply flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400;
  @apply cursor-pointer py-2 pl-3 pr-4 border-b-2 border-transparent;
  /* @apply hover:bg-gray-100; */
  @apply hover:text-gray-500 dark:hover:text-gray-300;

  svg {
    @apply w-[18px] h-[18px];
  }
}

.project-view-item .project-tab-action {
  @apply opacity-0 transition-all absolute -right-1 top-1.5 p-1 hover:bg-gray-100 rounded;
  @apply w-[23px] h-[23px];
  @apply dark:hover:bg-gray-700;
}

.project-view-item.active {
  @apply border-indigo-400 text-indigo-700;
  @apply dark:border-indigo-500 text-indigo-600;
  @apply dark:text-indigo-400;
}

.view-form {
  @apply -m-6 rounded-l-md;
}

.view-name-input {
  @apply flex items-center gap-2 border-b;
  @apply dark:border-gray-700 px-[1.625rem] py-4;
  @apply text-gray-500;

  input {
    @apply outline-none w-[87%] text-lg;
    @apply bg-transparent;
  }

  svg {
    @apply w-5 h-5;
  }

  .icon-select-trigger {
    @apply flex;
  }
}

.view-types {
  @apply shrink-0 w-[200px] h-full bg-white dark:bg-gray-900 rounded-l-md;
  @apply p-4 space-y-1.5;
}

.view-item {
  @apply flex items-center gap-2 cursor-pointer;
  @apply text-sm text-gray-500;
  @apply py-2 px-2.5 rounded-md transition-all;
  @apply duration-150;
  @apply hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-400;

  svg {
    @apply w-5 h-5;
  }

  &.active {
    @apply bg-indigo-50 text-indigo-600;
    @apply dark:bg-indigo-500/20 dark:text-indigo-300;
  }
}

.view-form-detail {
  @apply bg-gray-100 dark:bg-gray-800 rounded-r-md;
  @apply py-4 px-8 w-full border-l dark:border-gray-700;
}
